<template>
  <div class="demo">
    <ikun-scroll-table
      :wait-time="0"
      :column-styles="columnStyles"
      :row-styles="rowStyles"
      :columns="tableColumns"
      :data-list="dataList" />
  </div>
</template>

<script lang="ts" setup>

const rate = 2.5;
const tableColumns = [
  { label: "编号", field: "uid", align: "center", width: 30 * rate },
  { label: "姓名", field: "name", width: 50 * rate },
  { label: "兴趣", field: "lovely", width: 60 * rate },
  { label: "个人介绍", field: "desc", width: 100 * rate }
];
const dataList = [{
  uid: "1",
  name: "张三",
  lovely: "喜欢",
  desc: "喜欢什么什么"
},
  {
    uid: "2",
    name: "李四",
    lovely: "喜欢",
    desc: "喜欢什么什么"
  },
  {
    uid: "3",
    name: "王五",
    lovely: "喜欢",
    desc: "喜欢什么什么"
  },
  {
    uid: "4",
    name: "赵六",
    lovely: "喜欢",
    desc: "喜欢什么什么"
  },
  {
    uid: "5",
    name: "钱七",
    lovely: "喜欢",
    desc: "喜欢什么什么"
  },
  {
    uid: "6",
    name: "孙八",
    lovely: "喜欢",
    desc: "喜欢什么什么"
  }
];
const columnStyles = {
  height: 12.8 * rate,
  fontSize: 6.2 * rate,
  color: "white",
  bgColor: "#a1a1a1"
};
const rowStyles = {
  height: 12.8 * rate,
  fontSize: 5.6 * rate,
  color: "white",
  bgColor: "#000"
};

</script>
<style lang="scss" scoped>

.demo {
  height: 200px;
  overflow: hidden;
}
</style>
